<template>
    <el-card shadow="never">
        <div class="content">
            <div class="left_info">
                <div class="personal_info">
                    <el-avatar class="avatar" :src="member_info.avatar || circleUrl"></el-avatar>
                    <div>
                        <div class="name">
                            {{ member_info.nickname || '--' }}
                        </div>
                        <div class="mobile">
                            {{ member_info.mobile || '--' }}
                        </div>
                        <!-- 有赞会员通需求将加入时间改为入会时间 -->
                        <div class="mobile time">入会时间： {{ member_info.shop_join_time || '--' }}</div>
                    </div>
                </div>
                <div class="personal_number">
                    <div class="numer_detail">
                        <div class="growth_integral">
                            成长值
                            <el-icon
                                v-auth="'ADJUST_MEMBERSHIP_GROWTH_VALUES'"
                                class="growth_integral_icon"
                                @click="handleGrowthIntegral">
                                <EditPen />
                            </el-icon>
                        </div>
                        <div class="number">
                            {{ member_info?.growth_val || 0 }}
                        </div>
                    </div>
                    <div class="numer_detail">
                        <div class="growth_integral">
                            可用积分
                            <el-icon
                                v-auth="'ADJUST_MEMBER_POINTS'"
                                class="growth_integral_icon"
                                @click="handleAvailableIntegral">
                                <EditPen />
                            </el-icon>
                        </div>
                        <div class="number">
                            {{ member_info?.points?.available_points || 0 }}
                        </div>
                    </div>
                </div>
                <div class="tag_info">
                    <el-popover
                        v-show="member_info?.cust_tag?.length > 0"
                        placement="top"
                        :width="400"
                        trigger="hover"
                        popper-class="popper">
                        <template #reference>
                            <div class="tag_detail">
                                <el-tag v-for="item in member_info.cust_tag" :key="item" class="tag_item">
                                    {{ item.name }}
                                </el-tag>
                            </div>
                        </template>
                        <el-tag v-for="item in member_info.cust_tag" :key="item" class="tag_item">
                            {{ item.name }}
                        </el-tag>
                    </el-popover>
                </div>
                <div>
                    <ul class="pre_main">
                        <li v-for="(item, index) in view_info" :key="index" class="pre_list_item">
                            <template v-if="item.content == 'mobile'">
                                <span class="pre__item_label">{{ item.name }}</span>
                                <span class="pre_item_con">
                                    {{ member_info[item.content] }}
                                </span>
                            </template>
                            <template v-else-if="item.content == 'sex'">
                                <span class="pre__item_label">{{ item.name }}</span>
                                <span class="pre_item_con">{{ getSex(member_info[item.content]) }}</span>
                            </template>
                            <template v-else-if="item.content == 'order_channel'">
                                <span class="pre__item_label">{{ item.name }}</span>
                                <span v-if="member_info[item.content] != ''" class="pre_item_con">
                                    <span v-for="(jtem, jndex) in member_info[item.content]" :key="`jtem_${jndex}`">
                                        {{ jtem.name }}
                                        <span v-show="member_info[item.content].length - 1 !== jndex">、</span>
                                    </span>
                                </span>
                                <span v-else>--</span>
                            </template>
                            <template v-else-if="item.content == 'order_shop'">
                                <span class="pre__item_label">{{ item.name }}</span>
                                <span v-if="member_info[item.content] != ''" class="pre_item_con">
                                    <span
                                        v-for="(jtem, jndex) in member_info[item.content]"
                                        :key="`jtem_${jndex}`"
                                        style="display: inline-flex; align-items: center">
                                        <el-image
                                            style="display: inline-block; width: 16px; height: 16px; margin-right: 4px"
                                            :src="
                                                jtem.source_type == 1
                                                    ? '/static/member/shop-icon-small.png'
                                                    : '/static/member/member-icon-small.png'
                                            ">
                                        </el-image>
                                        {{ jtem.name }}
                                        <span v-show="member_info[item.content].length - 1 !== jndex">、</span>
                                    </span>
                                </span>
                                <span v-else>--</span>
                            </template>
                            <template v-else-if="item.content == 'cust_name'">
                                <span class="pre__item_label">{{ item.name }}</span>
                                <span class="pre_item_con pre_color" @click="goCustDetail(1)">{{
                                    member_info[item.content] ? member_info[item.content] : '--'
                                }}</span>
                            </template>
                            <template v-else-if="item.content == 'other_custs'">
                                <span class="pre__item_label">{{ item.name }}</span>
                                <div v-if="member_info[item.content] != ''" class="pre_item pre_color">
                                    <div v-for="(jtem, index) in member_info[item.content]" :key="index">
                                        <div @click="goCustDetails(jtem)">{{ jtem.cust_name }}</div>
                                    </div>
                                </div>
                                <div v-else class="pre_color">--</div>
                            </template>
                            <template v-else>
                                <span class="pre__item_label">{{ item.name }}</span>
                                <span class="pre_item_con">{{
                                    member_info[item.content] ? member_info[item.content] : '--'
                                }}</span>
                            </template>
                        </li>
                    </ul>
                </div>
            </div>
            <div class="right_info">
                <el-tabs v-model="activeName">
                    <el-tab-pane v-for="item in tabs" :key="item.id" :name="item.id" :label="item.name"></el-tab-pane>
                </el-tabs>
                <div v-if="activeName == '1' && member_no">
                    <div class="num_list">
                        <div v-for="(item, index) in numList" :key="index" class="num_content">
                            <div class="num_title">
                                {{ item.name }}
                                <el-tooltip effect="dark" placement="top">
                                    <template #content>
                                        <div class="box_item">
                                            <p class="box_tips">
                                                {{ item.tips }}
                                            </p>
                                        </div>
                                    </template>
                                    <el-image src="/static/question.png" class="tips_img"></el-image>
                                </el-tooltip>
                            </div>
                            <div class="num_detail" :style="{ fontSize: fontSize(numInfo[item.content]) }">
                                {{
                                    numInfo[item.content] ? numFormat(numInfo[item.content]) : getDefault(item.content)
                                }}
                            </div>
                        </div>
                    </div>
                    <businessTable
                        :member_info="member_info"
                        :member_no="member_no"
                        @search-data="getMemberStat(member_no)"></businessTable>
                </div>
                <div v-if="activeName == '2' && member_no">
                    <shopTable :member_no="member_no"></shopTable>
                </div>
                <div v-if="activeName == '3' && member_no">
                    <integralTable :member_no="member_no"></integralTable>
                </div>
                <div v-if="activeName == '4' && member_no">
                    <growthTable :member_no="member_no"></growthTable>
                </div>
            </div>
        </div>
    </el-card>

    <!-- 调整积分成长值弹框 of start -->
    <growthIntegral ref="growthIntegralRef" @submit="growthIntegralSubmit"></growthIntegral>
    <!-- 调整积分成长值弹框 of end -->
</template>
<script setup lang="ts">
import { onMounted, reactive, ref, watch } from 'vue';
import businessTable from './components/businessTable.vue';
import shopTable from './components/shopTable.vue';
import integralTable from './components/integralTable.vue';
import growthTable from './components/growthTable.vue';
import { memberInfo, memberStat } from '@/api/member/memberList/index';
import growthIntegral from './components/growthIntegral.vue';

import { useRoute, useRouter } from 'vue-router';
import { numFormat } from '@/utils/utils';
const route = useRoute();
const router = useRouter();
const member_no = ref();
const member_info = ref({
    points: {
        available_points: 0
    },
    growth_val: 0
});
const circleUrl = ref('https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png');
const view_info = reactive([
    { name: '会员昵称：', content: 'nickname' },
    { name: '手机号：', content: 'mobile' },
    { name: '性别：', content: 'sex' },
    { name: '生日：', content: 'birthday' },
    { name: '所在地区：', content: 'area' },
    { name: '会员ID：', content: 'member_no' },
    { name: '入会时间：', content: 'shop_join_time' },
    { name: '创建时间：', content: 'join_time' },
    { name: '来源渠道：', content: 'join_channel_name' },
    { name: '来源店铺：', content: 'join_shop_name' },
    { name: '下单渠道：', content: 'order_channel' },
    { name: '下单店铺/达人：', content: 'order_shop' },
    { name: '会员等级：', content: 'level_name' },
    { name: '关联客户：', content: 'cust_name' },
    { name: '其他客户：', content: 'other_custs' }
]);
const activeName = ref('1');
watch(
    () => route.query.tab,
    (val: any) => {
        activeName.value = val / 1 == 3 ? '3' : '1';
    },
    { immediate: true }
);
const tabs = ref([
    { id: '1', name: '交易信息' },
    { id: '2', name: '店铺/达人' },
    { id: '3', name: '积分明细' },
    { id: '4', name: '成长值明细' }
]);
const numInfo = ref({});
const numList = reactive([
    {
        name: '应付金额(元)',
        content: 'total_payable_amount',
        tips: '会员已支付订单（去除完全退款和部分退款订单中的已退款部分、取消订单）中，包括优惠减免金额及优惠抵扣金额，客户应支付的金额，包含运费、税费，包括纯积分支付的订单。'
    },
    {
        name: '实付金额(元)',
        content: 'total_order_amount',
        tips: '会员已支付订单（去除完全退款和部分退款订单中的已退款部分、取消订单）中，在扣除优惠减免金额及优惠抵扣金额后，客户实际支付的金额，包含运费、税费。'
    },
    {
        name: '累计支付单数',
        content: 'total_order_num',
        tips: '该会员已支付的订单总数（去除完全退款订单、取消订单），包括纯积分支付的订单。'
    },
    {
        name: '累计商品件数',
        content: 'total_order_product_num',
        tips: '该会员已支付的订单（去除完全退款和部分退款订单中的已退款部分、取消订单）中，购买商品的总件数（同一个商品规格购买N件就算N件）。'
    },
    {
        name: '客单件',
        content: 'avg_order_num',
        tips: '该会员平均每笔订单的商品件数（商品件数/支付单数）统计订单中商品sku的维度，比如：买了晨光的红色圆珠笔2支，件数就是2。'
    },
    { name: '客单价(元)', content: 'avg_order_amount', tips: '该会员平均每笔订单的金额（应付金额/支付单数）。' },
    {
        name: '上次购买距今(天)',
        content: 'last_order_interval',
        tips: '最后一笔已支付（去除完全退款、取消订单）订单下单时间距今天数。'
    },
    {
        name: '购买频次',
        content: 'avg_order_rate',
        tips: '每笔已支付的未取消和完全退款订单下单间隔天数之和÷（订单数-1），保留一位小数比如2单，第一单15天前下的，第二单7天前下的，就是(15+7)÷1，当日下的订单不算在内。'
    }
]);
const getSex = (val: any) => {
    return val == 0 ? '未知' : val == 1 ? '男' : val == 2 ? '女' : '--';
};
const getDefault = (val: any) => {
    if (val == 'total_payable_amount' || val == 'total_order_amount' || val == 'avg_order_amount') {
        return '0.00';
    }
    if (val == 'total_order_num' || val == 'total_order_product_num' || val == 'avg_order_num') {
        return 0;
    }
    if (val == 'last_order_interval' || val == 'avg_order_rate') {
        return '--';
    }
};
const goCustDetail = () => {
    if (!member_info.value.cust_id) {
        return;
    }
    router.push(`/customer/manage/list/detail?id=${member_info.value.cust_id}&type=${member_info.value.cust_type}`);
};
const goCustDetails = (val: any) => {
    if (!val.cust_id) {
        return;
    }
    router.push(`/customer/manage/list/detail?id=${val.cust_id}&type=${val.cust_type}`);
};
const fontSize = (val: any) => {
    if (val) {
        let size = 24;
        switch (val.toString().length) {
            case 15:
                size = 20;
                break;
            case 20:
                size = 18;
                break;
            case 25:
                size = 16;
                break;
            case 30:
                size = 14;
                break;
            default:
                size = 24;
        }
        return `${size}px`;
    }
};
const getMemberInfo = (val: any) => {
    memberInfo({ member_no: val }).then((res: any) => {
        member_info.value = res;
    });
};
const getMemberStat = (val: any) => {
    memberStat({ member_no: val }).then((res: any) => {
        numInfo.value = res;
    });
};

/* 调整积分成长值 of start */
const growthIntegralRef = ref(null);
/**
 * 成长值
 */
const handleGrowthIntegral = () => {
    growthIntegralRef.value.visibleGrowth = true;
    growthIntegralRef.value.appDialog.title = '调整成长值';
    growthIntegralRef.value.appDialog.type = 2;
};
/**
 * 积分
 */
const handleAvailableIntegral = () => {
    growthIntegralRef.value.visibleGrowth = true;
    growthIntegralRef.value.appDialog.title = '调整积分';
    growthIntegralRef.value.appDialog.type = 1;
};

/**
 * 调整积分成长值
 */

const growthIntegralSubmit = (result: any) => {
    if (growthIntegralRef.value?.appDialog.type == 1) {
        member_info.value.points.available_points = result.available_points;
    } else {
        member_info.value['growth_val'] = result.available_experience;
    }
};

/* 调整积分成长值 of end */

onMounted(() => {
    member_no.value = route.query.member_no;
    getMemberInfo(member_no.value);
    getMemberStat(member_no.value);
});
</script>
<style lang="scss" scoped>
.content {
    display: flex;
    width: 100%;

    .left_info {
        width: 25%;
        min-width: 350px;
        border-right: 2px solid #eaeaea;
        padding: 4px;
        padding-right: 24px;

        .personal_info {
            display: flex;

            .avatar {
                width: 64px;
                height: 64px;
                margin-right: 12px;
            }

            .name {
                font-size: 16px;
                font-weight: 500;
                color: #33302d;
                line-height: 22px;
            }

            .mobile {
                font-size: 14px;
                font-weight: 400;
                color: #33302d;
                line-height: 20px;
            }

            .time {
                color: #969696;
            }
        }

        .personal_number {
            margin: 24px 0;
            border-radius: 2px;
            border: 1px solid #eaeaea;
            display: flex;

            .numer_detail {
                margin: 24px 0;
                padding: 0 24px;
                width: 50%;
                text-align: center;

                .growth_integral {
                    font-size: 14px;
                    font-weight: 400;
                    color: #969696;
                    line-height: 32px;

                    .growth_integral_icon {
                        font-size: 12px;
                        color: #666;
                        cursor: pointer;
                    }
                }

                .number {
                    font-size: 24px;
                    font-weight: 500;
                    color: #ff6b00;
                    line-height: 24px;
                }
            }

            .numer_detail:first-child {
                border-right: 1px solid #eaeaea;
            }
        }

        .tag_info {
            display: flex;
            flex-wrap: wrap;
            border-bottom: 1px solid #eaeaea;

            .tag_detail {
                margin-bottom: 14px;
                overflow: hidden;
                text-overflow: ellipsis;
                display: -webkit-box;
                -webkit-line-clamp: 2;
                line-clamp: 2;
                -webkit-box-orient: vertical;
            }
        }

        .pre_main {
            display: block;
            padding-top: 24px;

            .pre_list_item {
                margin-bottom: 24px;
                display: flex;
                font-size: 14px;
                line-height: 14px;
                font-weight: 400;
                text-align: right;
                color: #33302d;

                .pre__item_label {
                    display: inline-block;
                    white-space: nowrap;
                    text-align: left;
                    width: 95px;
                    color: #999;
                }

                .pre_item_con {
                    width: 300px;
                    word-break: break-all;
                    text-overflow: ellipsis;
                    overflow: hidden;

                    // eslint-disable-next-line
                    -webkit-line-clamp: 2; //元素几行显示
                    -webkit-box-orient: vertical;
                    text-align: left;
                    flex: 1;
                }

                .pre_item {
                    line-height: 20px;
                    width: 300px;
                    text-align: left;
                    flex: 1;
                }

                .pre_color {
                    cursor: pointer;
                    color: #ff6b00;
                }
            }
        }
    }

    .right_info {
        width: 75%;
        padding: 4px;
        padding-left: 24px;
        overflow: auto;

        .num_list {
            width: 100%;
            border-radius: 2px;
            border: 1px solid #eaeaea;
            padding: 24px 0;
            margin-bottom: 16px;
            display: flex;
            flex-wrap: wrap;

            .num_content {
                width: 20%;
                text-align: left;
                padding-left: 5%;

                .num_title {
                    font-size: 14px;
                    font-weight: 400;
                    color: #969696;
                    line-height: 20px;
                }

                .num_detail {
                    font-size: 24px;
                    font-weight: 500;
                    color: #33302d;
                    line-height: 40px;
                }
            }

            .num_content:nth-child(-n + 4) {
                margin-bottom: 12px;
            }
        }
    }
}

.tag_item {
    margin: 0 8px 10px 0;
}

.tips_img {
    width: 16px;
    height: 16px;
    margin-left: 3px;
    vertical-align: middle;
}

.box_item {
    max-width: 260px;
    margin-bottom: -6px;

    .box_tips {
        font-size: 12px;
        line-height: 1.6;
        margin-bottom: 6px;
    }
}
</style>
